import $ from "jquery";
import Vue from "vue";

import EditorDefaultConfig from "@/config/editorDefaultConfig.js";
import BaseUtil from "@/utils/baseUtil.js";

export default {

    data() {
        return {
            baseConfig: null,

            EditorDefaultConfig: EditorDefaultConfig,

            categoryLocation: EditorDefaultConfig.categoryLocation,

            childIndex: 0,    //outLineManualButtonIndex

            grandsonIndex: 0,    //outLineManualDetail

            previousIndex: -1,

            baseType: "entry_scene",
        }
    },

    mounted() {

        const _this = this;

        this.resizeWarp();

        if (Vue.prototype.baseConfig) {
            this.loadHandler();
        }

        this.$root.$on("outLineDataChanged", _this.reloadData);

        $(window).resize(() => _this.resizeWarp());
    },

    methods: {

        slideToggle(e, key, k1) {

            let target = e.target;
            const className = $(".editorPickContainer ." + key);
            const childIndex = this.categoryLocation[this.childIndex].childrens[k1];

            this.grandsonIndex = childIndex;

            if (!$(target).hasClass("categoryTitle")) {
                target = $(target).parent(".categoryTitle");
            }

            $(target).toggleClass("slideInStyle").siblings().slideToggle(200);

            className.children().eq(childIndex).children().eq(0).addClass("lightTitleActive");
            className.children().eq(childIndex).children().eq(1).slideDown();

            if (key === "model") {

                const findObj = Vue.prototype.baseConfig[key][k1];

                $(".meshWarp").hide();

                window.viewport.selectObj(findObj);

                $(".model .modelName input").attr("disabled", "disabled");

                this.$root.$emit("editorDataChanged", {singleParent: key, singleKey: k1});
            }


        },

        eventManager() {

            const _this = this;

            $(() => {

                let i = 0;
                const buttonCollect = $('.outLineOptionBtnGroup button');

                for (i; i < buttonCollect.length; i++) {

                    buttonCollect.eq(i).on("click", _this.toggleOutLine);
                }

            });
        },

        toggleOutLine(e) {

            this.previousIndex = -1;

            const index = $(e.currentTarget).index();

            this.childIndex = index;

            const showEditorClassName = this.categoryLocation[index].type;

            $('.outLineOptionBtnGroup button').removeClass("active").eq(index).addClass("active");

            $('.container .categoryContainer').hide().eq(index).show();

            $(".editorPickContainer").children().hide();

            if (BaseUtil.isLCS(showEditorClassName)) {

                $(".editorPickContainer ." + showEditorClassName).show();
            }

            this.baseConfig = Vue.prototype.baseConfig[showEditorClassName];

            this.baseType = showEditorClassName;

            if (index === 0) {
                $(".editorPickContainer .light").show();
            }

            this.$forceUpdate();

        },

        resizeWarp() {

            $(".warp .baseContent").height($("#warp").height() - 50);

            const contentLeft = $("#contentLeft").width();
            const contentRight = $("#contentRight").width();
            

            const contentCenterW = $("#warp").width() - contentLeft - contentRight - 4;

            $("#contentCenter").width(contentCenterW);


            const titleMargin = ($("#warp").width() - 100) / 2 + "px";

            const elm = $("#topManualContent").find(".title")[0];
            if (elm) {
                elm.style.left = titleMargin;
            }


            const outLineDetail = $("#contentLeft").find(".outLineOptionDetai")[0];
            if (outLineDetail !== null) {
                outLineDetail.style.height = $("#contentLeft").height() * 0.85 + "px";
            }

            $("canvas").width($('.scenesView').width()).height($('.scenesView').height());
            if (window.viewport) {
                window.viewport.resizeWindow();
            }
        },

        reloadData (isInit) {

            this.baseConfig = Vue.prototype.baseConfig[this.baseType];

            this.$forceUpdate();

            if (isInit) {
                this.loadHandler();
            }
        },

        selectedDetiail (e, key, parentKey, baseType) {

            this.previousIndex = key;

            let target = e.target;

            if (!$(target).hasClass("categoryDetailBox")) {

                if (!$(target).parents(".categoryDetailBox").length) {

                    if (!$(target).hasClass("categoryDetail")) {
                        target = $(target).parents(".categoryDetail");
                    }

                    $(target).css("background", "rgba(105,108,145,1)");

                    const childSet = $(target).parent().siblings().children();

                    if (childSet.length > 0) {
                        childSet.css("background", "rgba(47, 49, 67, 1)");
                    }

                    this.showEditorInfo(key, parentKey);

                    return
                }

                target = $(target).parents(".categoryDetailBox");

            }

            $(".categoryDetailBox").removeClass("categoryDetailActive");

            $(target).addClass("categoryDetailActive");

            this.showEditorInfo(key, parentKey, baseType);

        },

        showEditorInfo (key, parentKey, baseType="") {

            const showEditorClassName = this.categoryLocation[this.childIndex].type;

            let findObj = null;

            if (parentKey && !BaseUtil.isLCS(baseType)) {

                if (baseType === "model") {

                    findObj = Vue.prototype.baseConfig['model'][parentKey].children[key];

                    $(".meshWarp").show();
                    $(".model .modelName input").attr("disabled", "disabled");

                    this.$root.$emit("editorDataChanged", {singleParent: parentKey, singleKey: key, isMesh: true});

                } else if (parentKey === "textures" || parentKey === "text" || parentKey === "geo") {
                    this.$root.$emit("editorDataChanged", {singleParent: parentKey, singleKey: key});
                } else if (baseType === "material") {
                    this.$root.$emit("editorDataChanged", {singleParent: parentKey, singleKey: key, isMaterial: true});
                }

            } else if (typeof key === "number" && parentKey) {

                this.grandsonIndex = this.EditorDefaultConfig.getChildIndexByTypeAndChildName(showEditorClassName, parentKey);

                const target = $(".editorPickContainer ." + showEditorClassName).children()
                    .eq(this.grandsonIndex).find(".catContainer").eq(key);

                $(target).find(".title").addClass("titleActive");
                $(target).find(".lightContainer").slideDown(200);

                const indexK = key * ($(target).find("div.title").height() + 258);

                $("#contentRight").animate({scrollTop: indexK}, 300);

                const findIndex = this.EditorDefaultConfig.getChildNameByTypeAndChildIndex(showEditorClassName, this.grandsonIndex);

                findObj = Vue.prototype.baseConfig[showEditorClassName][findIndex][key];
            }


            if (findObj !== null) window.viewport.selectObj(findObj);
        },

        loadHandler () {

            const _this = this;

            this.eventManager();

            this.$nextTick(() => {

                $('.outLineManualContent .outLineOptionDetai .categoryDetail').show();

                $(".editorPickContainer .light").show();

                _this.resizeWarp();
            });
        },

        isMesh: (childArray) => childArray.filter(item => item.type === "Mesh"),
    }


}